<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>产品列表</title>

    <link href="/css/base.css" rel="stylesheet">
    <link rel="stylesheet" href="/custom/uimaker/easyui.css">
    <link rel="stylesheet" type="text/css" href="/custom/uimaker/icon.css">
    <link rel="stylesheet" href="/css/providers1.css">
</head>
<body>
<div class="container">
    <table id="tt" title="Load Data" class="easyui-datagrid"
           url="/toy/goods_list"
           iconCls="icon-save" pagination="true"
           data-options="
                rownumbers:true,
                singleSelect:false,
                autoRowHeight:false,
                pagination:true,
                fitColumns:true,
                striped:true,
                checkOnSelect:false,
                selectOnCheck:false,
                collapsible:true,
                toolbar:'#tb',
                pageSize:10">
        <thead>
        <tr>
            <th field="id" width="10">id</th>
            <th field="goodsName" width="30">产品名</th>
            <th field="unit" width="10" align="center">单位</th>
            <th data-options="field:'imgUrl',formatter:showImg" width="80" >图片</th>
            <th field="salePrice" width="20" align="center">售价</th>
            <th field="gmtCreate" width="30" align="center" data-options="formatter: formatDatebox">创建日期</th>
            <th field="gmtModified" width="30" align="center" data-options="formatter: formatDatebox">修改日期</th>

        </tr>
        </thead>
    </table>
</div>
<div id="tb" style="padding:0 30px;">
    <div class="conditions">
        <span class="con-span">供应商编码: </span><input class="easyui-textbox" type="text" name="code"
                                                    style="width:166px;height:35px;line-height:35px;"></input>
        <span class="con-span">供应商名称: </span><input class="easyui-textbox" type="text" name="name"
                                                    style="width:166px;height:35px;line-height:35px;"></input>
        <a href="#" class="easyui-linkbutton" iconCls="icon-search" data-options="selected:true">查询</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-reload">重置</a>
        <a href="#" class="easyui-linkbutton more" iconCls="icon-more">更多</a>

        <div class="opt-buttons">
            <a href="#" class="easyui-linkbutton" data-options="selected:true">新增</a>
            <a href="#" class="easyui-linkbutton">发布</a>
            <a href="#" class="easyui-linkbutton">取消发布</a>
            <a href="#" class="easyui-linkbutton">标记为执行完毕</a>
            <a href="#" class="easyui-linkbutton">导出</a>
        </div>
    </div>
    <script type="text/javascript" src="/custom/jquery.min.js"></script>
    <script type="text/javascript" src="/custom/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/custom/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>


    <script type="text/javascript">



        /*  (function($){
              function pagerFilter(data){
                  if ($.isArray(data)){   // is array
                      data = {
                          total: data.length,
                          rows: data
                      }
                  }
                  var target = this;
                  var dg = $(target);
                  var state = dg.data('datagrid');
                  var opts = dg.datagrid('options');
                  if (!state.allRows){
                      state.allRows = (data.rows);
                  }
                  if (!opts.remoteSort && opts.sortName){
                      var names = opts.sortName.split(',');
                      var orders = opts.sortOrder.split(',');
                      state.allRows.sort(function(r1,r2){
                          var r = 0;
                          for(var i=0; i<names.length; i++){
                              var sn = names[i];
                              var so = orders[i];
                              var col = $(target).datagrid('getColumnOption', sn);
                              var sortFunc = col.sorter || function(a,b){
                                  return a==b ? 0 : (a>b?1:-1);
                              };
                              r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1);
                              if (r != 0){
                                  return r;
                              }
                          }
                          return r;
                      });
                  }
                  var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
                  var end = start + parseInt(opts.pageSize);
                  data.rows = state.allRows.slice(start, end);
                  return data;
              }

              var loadDataMethod = $.fn.datagrid.methods.loadData;
              var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
              $.extend($.fn.datagrid.methods, {
                  clientPaging: function(jq){
                      return jq.each(function(){
                          var dg = $(this);
                          var state = dg.data('datagrid');
                          var opts = state.options;
                          opts.loadFilter = pagerFilter;
                          var onBeforeLoad = opts.onBeforeLoad;
                          opts.onBeforeLoad = function(param){
                              state.allRows = null;
                              return onBeforeLoad.call(this, param);
                          }
                          var pager = dg.datagrid('getPager');
                          pager.pagination({
                              onSelectPage:function(pageNum, pageSize){
                                  opts.pageNumber = pageNum;
                                  opts.pageSize = pageSize;
                                  pager.pagination('refresh',{
                                      pageNumber:pageNum,
                                      pageSize:pageSize
                                  });
                                  dg.datagrid('loadData',state.allRows);
                              }
                          });
                          $(this).datagrid('loadData', state.data);
                          if (opts.url){
                              $(this).datagrid('reload');
                          }
                      });
                  },
                  loadData: function(jq, data){
                      jq.each(function(){
                          $(this).data('datagrid').allRows = null;
                      });
                      return loadDataMethod.call($.fn.datagrid.methods, jq, data);
                  },
                  deleteRow: function(jq, index){
                      return jq.each(function(){
                          var row = $(this).datagrid('getRows')[index];
                          deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
                          var state = $(this).data('datagrid');
                          if (state.options.loadFilter == pagerFilter){
                              for(var i=0; i<state.allRows.length; i++){
                                  if (state.allRows[i] == row){
                                      state.allRows.splice(i,1);
                                      break;
                                  }
                              }
                              $(this).datagrid('loadData', state.allRows);
                          }
                      });
                  },
                  getAllRows: function(jq){
                      return jq.data('datagrid').allRows;
                  }
              })
          })(jQuery);

          function getData(){
              var rows = [];
              for(var i=1; i<=800; i++){
                  rows.push({
                      code: '10695',
                      name: '南京天泽星网股份有限公司',
                      level: '正式',
                      provide: '光纤通信设备配件',
                      full: '√',
                      issubmit: '√',
                      status:'已审核',
                      note: '-'
                  });
              }
              return rows;
          }

          $(function(){
              $('#dg').datagrid({data:getData()}).datagrid('clientPaging');
          });


          $(".more").click(function(){
              $(this).closest(".conditions").siblings().toggleClass("hide");
          });*/
    </script>
    <div id='dahuikuimg'></div>
</body>
</html>
